import React from "react";
import "../css/TodoBoard.css";
import {TODOKEY,FINISHED,PENDDING,DELETED} from  "./config";

class TodoBoard extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      todos:JSON.parse(localStorage.getItem(TODOKEY)) || [],//保存源数据
      filterTodos:[],//保存筛选出来的数据
      number:1
    }

    // this.setState({
    //   todos:this.props.todos
    // })
  }

  //创建阶段
  //组件将要挂载
  componentWillMount(){
    //更新组件本身的初始化状态
    // 组件挂载前，筛选数据
    var tempArray = [];
    this.state.todos.forEach(element => {
      if(element.status!==DELETED){
        tempArray.push(element);
      }
    });
    this.setState({
      filterTodos:tempArray
    })
  }

  render(){
    return(
      <div className="todo_board_container">
        <div className="todo_board_content">
        {
          this.state.filterTodos.map((element,index)=>{
            return <div key={index}
            className="todo_item_container">
              <div className="todo_item_checkbox">
                <input checked={element.status===FINISHED}
                type="checkbox" onChange={(event)=>{
                  console.log(event.target.checked);
                  var checked = event.target.checked;
                  if(checked){
                    element.status =  FINISHED;
                  }else{
                    element.status =  PENDDING;
                  }

                  //更新组件的状态
                  this.setState({
                    todos:this.state.todos
                  })
                  //保存
                  localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
                }}/>
              </div>
              <div className="todo_item_content">{element.content}</div>
              <div className="todo_item_button">
                <button onClick={()=>{
                  element.status=DELETED;
                  var index = this.state.filterTodos.findIndex((subElement)=>{
                    return  subElement.content===element.content;
                  })

                  if(index!==-1){
                    this.state.filterTodos.splice(index,1);
                  }
                  this.setState({
                    filterTodos:this.state.filterTodos
                  })

                   //保存
                   localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
                }}>删除</button>
              </div>
            </div>
          })
        }
        </div>
        <div className="todo_tool_bar">
          <div>
            <button onClick={()=>{
              var tempArray = [];
              this.state.todos.forEach(element => {
                if(element.status!==DELETED){
                  tempArray.push(element);
                }
              });
              this.setState({
                filterTodos:tempArray
              })
            }}>全部</button>
          </div>
          <div>
            <button onClick={()=>{
              this.state.filterTodos = [];
              this.state.todos.forEach(element => {
                if(element.status===FINISHED){
                  this.state.filterTodos.push(element)
                }
              });
              this.setState({
                filterTodos:this.state.filterTodos
              })
            }}>已完成</button>
          </div>
          <div>
            <button onClick={()=>{
              this.state.filterTodos = [];
              this.state.todos.forEach(element=>{
                if(element.status===PENDDING){
                  this.state.filterTodos.push(element);
                }
              })
              this.setState({
                filterTodos:this.state.filterTodos
              })
            }}>正在进行</button>
          </div>
          <div>
            <button onClick={()=>{
              // for(let index=0;index<100;index++){
              //   this.setState({
              //     number:2
              //   })
              // }

              this.setState({
                number:2
              })
              console.log(this.state.number)
            }}>已删除</button>
          </div>
        </div>
      </div>
    );
  }
  //组件完成挂载:vue mounted
  componentDidMount(){
    //执行异步请求或者耗时操作
  }

  //更新阶段
  componentWillReceiveProps(props){
    console.log(props);
    //接受新的props，更新组件的状态
    this.props = props;

    //去重 
    var index = this.state.todos.findIndex((element)=>{
      return element.content === this.props.todo.content;
    })

    if(index !== -1){
      alert('不能添加重复的todo');
      return;
    }
    
    this.state.todos.push(this.props.todo);
    //保存
    localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
    this.setState({
      todos:this.state.todos
    });

  }
  //是否允许组件更新
  shouldComponentUpdate(){
    return true;
  }

  componentWillUpdate(){
    
  }

  componentDidUpdate(){

  }
}

export default TodoBoard;